const AllSlides = [
    {
        img1: 'img1.jpg',
        active: true,
        place: '这是山边城堡',
        country: '有很多树'
    },
    {
        img1: 'img2.png',
        active: false,
        place: '这是草原和天空',
        country: '还有一棵树'
    },
    {
        img1: 'img3.jpg',
        active: false,
        place: '这是夜中城市',
        country: '树林围绕'
    },
    {
        img1: 'img4.png',
        active: false,
        place: '这是月下城堡',
        country: '有很多阴森的树'
    },
    {
        img1: 'img5.png',
        active: false,
        place: '这是太空站',
        country: '无法看到地面的树了'
    },
    {
        img1: 'img6.png',
        active: false,
        place: '这是水上房子',
        country: '只有一棵树'
    }
];
AllSlides.forEach(slideData=>{
    document.write( `
        <div class="bg-slide ${slideData.active ? ' active' : ''}">
            <div class="circle bg">
                <img src="${slideData.img1}">
            </div>
            <div class="circle large">
                <img src="${slideData.img1}">
            </div>
            <div class="circle small">
                <img src="${slideData.img1}">
            </div>
            <div class="content-text">
                <div class="place">
                    <h1>${slideData.place}</h1>
                </div>
                <div class="country">
                    <h2>${slideData.country}</h2>
                </div>
            </div>
        </div>
    `);
})